<template>
  <!-- 高维键 -->
  <div class='container'>
    <el-dialog title="新增文章" :visible.sync="dialogAddVisible" width="50%">
      <el-form ref="addFormRef" :model="formBase" label-width="80px" :rules="addRules">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formBase.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="formBase.articleBody" ref="myQuillEditor" :options="editorOption">
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="formBase.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/articles.js'
export default {
  name: 'articlesAdd',
  props: {
    formBase: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      addRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
        // videoURL: [
        //   {
        //     required: true,
        //     validator: function (rule, value, callback) {
        //       if (/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) === false) {
        //         callback(new Error('请输入正确的Url'))
        //       } else {
        //         callback()
        //       }
        //     },
        //     trigger: 'blur'
        //   }
        // ]
        // videoURL: [{ required: true, message: '请输入正确的Url', trigger: 'blur' }]
      },
      dialogAddVisible: false,
      // editorOption: {
      //   modules: {
      //     toolbar: [
      //       ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
      //       [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
      //       ['blockquote'],
      //       ['code-block', 'image', 'link'] // 引用，代码块
      //     ]
      //   }
      // },
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除字体样式
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      },
      content: ''
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogAddVisible = true
      this.$refs.addFormRef.resetFields()
    },
    handleAddData () {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          this.dialogAddVisible = false
          console.log(this.formBase)
          if (this.formBase.id) {
            try {
              update(this.formBase)
              this.$message.success('修改文章成功')
              this.$emit('addAdd')
            } catch (err) {
              console.log(err)
            }
          } else {
            try {
              add(this.formBase)
              this.$message.success('新增文章成功')
              this.$emit('addAdd')
            } catch (err) {
              console.log(err)
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>

<style scoped lang='less'>
/deep/ .ql-toolbar.ql-snow {
  padding: 0 8px;
}
/deep/ .ql-editor {
  height: 200px;
}
</style>
